<template>
  <Modal
    :title="title"
    v-model:active="cloudResourceSelectModalActive"
    width="1200px"
    :no-footer="true"
    class="doc-list-modal"
    x-offset="0"
    :style="{ padding: '0 !important' }"
    :onshow="refresh"
    undivided
  >
    <div class="custom-body">
      <Table
        ref="table"
        :data="data"
        :use-y-bar="false"
        virtual
        :height="456"
        head-class="custom-table-header"
        :cell-class="cellClass"
        @cell-click="handleCellClick"
        @cell-dblclick="handleCellDblclick"
      >
        <TableColumn name="文件名" id-key="docName" :width="576">
          <template #default="{ row }">
            <img
              :src="icon(row.objectName, 'folder')"
              class="icon"
              v-if="row.isDir"
            />
            <img
              :src="icon(row.objectName, '')"
              class="icon"
              v-if="!row.isDir"
            />
            <span style="cursor: pointer">{{ row.objectName }}</span>
          </template>
        </TableColumn>
        <TableColumn name="类型/大小" id-key="docType" :width="288">
          <template #default="{ row }">
            {{ row.isDir === "folder" ? "文件夹" : row.size / 1000 + "KB" }}
          </template>
        </TableColumn>
        <TableColumn name="最后修改时间" id-key="docTime" :width="288">
          <template>
            {{ "--------" }}
            <!-- {{ dayjs(row.docTime).format("YYYY-MM-DD HH:mm:ss") }} -->
          </template>
        </TableColumn>
      </Table>
    </div>
    <div class="custom-footer">
      <div class="footer-left">
        <div class="path">
          <span>当前位置：</span>
          <span>{{ path }}</span>
        </div>
      </div>
      <div class="footer-right">
        <Button type="default" size="small" @click="cancel">取消</Button>
        <Button type="primary" size="small" @click="confirm">确定</Button>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
import {
  Modal,
  Table,
  TableExposed,
  TableColumn,
  Button,
  TableCellPayload,
} from "cax-ui";
import {
  ref,
  defineProps,
  reactive,
  defineEmits,
  onMounted,
  toRefs,
} from "vue";
import dayjs from "dayjs";
import { useCoreStore } from "../store/coreStore";
import { storeToRefs } from "pinia";
import { getOssList } from "../api/oss";
const coreStore = useCoreStore();
const { cloudResourceSelectModalActive } = storeToRefs(coreStore);

interface Doc {
  objectName: string;
  isDir: string;
  size: number;
}
const iconPath = {
  jpg: "/icons/jpg.svg",
  md: "/icons/md.svg",
  folder: "/icons/folder.svg",
  zip: "/icons/zip.svg",
  unknown: "/icons/unknown.svg",
  pdf: "/icons/pdf.svg",
  csv: "/icons/csv.svg",
  doc: "/icons/doc.svg",
  docx: "/icons/doc.svg",
  png: "/icons/png.svg",
  xls: "/icons/xls.svg",
  xlsx: "/icons/xls.svg",
  bdf: "/icons/md.svg",
  stp: "/icons/md.svg",
  stl: "/icons/md.svg",
  obj: "/icons/md.svg",
  txt: "/icons/md.svg",
};
const table = ref<TableExposed>();
const selectedIndex = ref<number>(-1);
const historyPathList = ref<string[]>([]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  path: {
    type: String,
    default: "d3-engine/model",
  },
});
const { path: currentPath } = toRefs(props);

const data = ref<Doc[]>([]);
getOssList().then((r: any) => {
  data.value = r.data.data;
});

function refresh() {
  table.value?.refresh();
}
function cellClass({ rowIndex }: { rowIndex: number }): string {
  return rowIndex === selectedIndex.value ? "selected-row" : "";
}
function icon(fileName: string, fileType: string): string {
  let ext = "unknown";
  if (fileType === "folder") {
    ext = "folder";
  } else {
    ext = fileName.split(".")[1]?.toLowerCase() ?? "unknown";
  }
  return iconPath?.[ext] || iconPath.unknown;
}

function handleCellClick(payload: TableCellPayload) {
  selectedIndex.value = payload.rowIndex;
}

function handleCellDblclick(payload: TableCellPayload) {
  selectedIndex.value = payload.rowIndex;
  console.log(payload.rowIndex, data.value[0]);
  if (data.value[payload.rowIndex]?.docType === "folder") {
    historyPathList.value.push(data.value[payload.rowIndex].docName);
    currentPath.value = `${currentPath.value}/${
      data.value[payload.rowIndex].docName
    }`;
    getDocList();
  }
}
function getDocList() {
  refresh();
}
onMounted(() => {
  // getDocList();
});

function cancel() {
  coreStore.changeCloudResourceSelectModalActive(false);
}
function confirm() {
  const name = data.value[selectedIndex.value]?.objectName;
  coreStore.changeCurrentCloudResource(name);
  coreStore.changeCloudResourceSelectModalActive(false);
}
</script>

<style lang="less" scoped>
.custom-body {
  margin: 0 -14px;
  border-top: 1px solid #e8e8e8;
  padding: 24px;
}

:deep(.vxp-table__head-cell) {
  font-weight: bold;
}

:deep(.selected-row) {
  background-color: #e5f7fe;
}

.icon {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

.custom-footer {
  display: flex;
  justify-content: space-between;
}
</style>
